<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熔断器演示 - Spring Cloud CircuitBreaker</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #e0e7ff 0%, #f4f6fb 100%);
            margin: 0;
            min-height: 100vh;
        }
        .container {
            max-width: 420px;
            margin: 60px auto;
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 8px 32px rgba(79,140,255,0.10);
            padding: 38px 30px 32px 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        h1 {
            text-align: center;
            color: #2d3a4b;
            margin-bottom: 32px;
            font-size: 2.1rem;
            letter-spacing: 2px;
        }
        .form-group {
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            width: 100%;
        }
        label {
            flex: 1;
            font-size: 16px;
            color: #333;
        }
        input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin-left: 12px;
        }
        button {
            background: linear-gradient(90deg, #4f8cff 0%, #2563eb 100%);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 12px 36px;
            font-size: 17px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s, box-shadow 0.2s;
            box-shadow: 0 2px 8px rgba(79,140,255,0.08);
        }
        button:hover {
            background: linear-gradient(90deg, #2563eb 0%, #4f8cff 100%);
            box-shadow: 0 4px 16px rgba(79,140,255,0.13);
        }
        .result {
            margin-top: 32px;
            padding: 24px;
            border-radius: 10px;
            background: #f8fafc;
            border: 1px solid #e3e8ee;
            min-height: 80px;
            font-size: 16px;
            box-shadow: 0 2px 8px rgba(79,140,255,0.04);
            width: 100%;
            word-break: break-all;
        }
        .status-success { color: #22c55e; font-weight: bold; }
        .status-error { color: #ef4444; font-weight: bold; }
        .fade-in { animation: fadeIn 0.7s; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px);} to { opacity: 1; transform: none;} }
        @media (max-width: 600px) {
            .container { max-width: 98vw; padding: 18px 4vw; }
            h1 { font-size: 1.3rem; }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>熔断器演示</h1>
        <div class="form-group">
            <label for="failCheckbox">是否模拟失败（触发熔断/降级）</label>
            <input type="checkbox" id="failCheckbox">
        </div>
        <div class="form-group" style="justify-content:center;">
            <button onclick="testCircuitBreaker()">发起熔断演示请求</button>
        </div>
        <div class="result" id="result"></div>
    </div>
    <script>
        function testCircuitBreaker() {
            const fail = document.getElementById('failCheckbox').checked;
            const url = `/api/circuit-breaker/demo?fail=${fail}`;
            const resultDiv = document.getElementById('result');
            if (!resultDiv) return;
            resultDiv.innerHTML = '<span style="color:#888;">请求中...</span>';
            fetch(url)
                .then(res => res.json())
                .then(data => {
                    let statusClass = data.code === 200 ? 'status-success' : 'status-error';
                    let html = `<div class='fade-in'><b>状态码：</b> <span class='${statusClass}'>${data.code}</span><br>`;
                    html += `<b>消息：</b> <span>${data.message}</span><br>`;
                    html += `<b>数据：</b> <span>${data.data || ''}</span></div>`;
                    resultDiv.innerHTML = html;
                })
                .catch(err => {
                    resultDiv.innerHTML = `<span class='status-error fade-in'>请求异常：${err}</span>`;
                });
        }
    </script>
</body>
</html> 